<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ResizeObserver API 示例</title>
    <style>
      #resizableElement {
        /* width: 200px;
        height: 200px; */
        width: 100vw;
        height: 100vh;
        background-color: lightblue;
        overflow: hidden;
      }
    </style>
  </head>

  <body>
    <div id="box">
      <div id="resizableElement">Resizable Element</div>
    </div>

    <button id="btn">点击隐藏</button>

    <script>
      // 获取要监视的元素
      const resizableElement = document.getElementById("resizableElement");

      // 创建 ResizeObserver 实例
      const resizeObserver = new ResizeObserver((entries) => {
        // entries 是一个 ResizeObserverEntry 对象数组，包含了所有监视的元素和它们的大小信息
        for (let entry of entries) {
          // entry.contentRect 包含了元素的边界矩形信息
          console.log("Element width:", entry.contentRect.width);
          console.log("Element height:", entry.contentRect.height);

          // 在这里你可以执行其他操作，比如根据元素的大小变化调整布局或样式
        }
      });

      // 开始监视元素
      resizeObserver.observe(resizableElement);

      // 停止监视元素
      // resizeObserver.unobserve(resizableElement);

      // 当不再需要观察器时，可以调用 disconnect 方法来停止观察
      // resizeObserver.disconnect();

      const box = document.getElementById("box");
      document.getElementById("btn").addEventListener("click", () => {
        box.style.display = box.style.display === "none" ? "block" : "none";
      });
    </script>
  </body>
</html>
